<template>
  <div class="gold-shop-wrap">
    <van-nav-bar
      :title="type == 1 ? '绑定银行卡' : '绑定支付宝'"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <div v-if="type == 2">
      <van-cell-group>
        <van-field
          clearable
          v-model="name"
          label="姓名"
          placeholder="请输入姓名"
          input-align="right"
        />
        <van-field
          clearable
          v-model="account"
          label="支付宝"
          placeholder="请输入支付宝账户"
          input-align="right"
        />
      </van-cell-group>
    </div>
    <div v-else>
      <van-cell-group>
        <van-field
          clearable
          v-model="name"
          label="姓名"
          placeholder="请输入姓名"
          input-align="right"
        />
        <!-- <van-field
          clearable
          v-model="bind_name"
          label="银行名称"
          placeholder="请选择银行名称"
          input-align="right"
          @click="showPopup = true"
        readonly
        is-link
        /> -->
        <van-field
          clearable
          v-model="account"
          label="银行卡"
          placeholder="请输入银行卡号"
          input-align="right"
        />
        <van-field
          clearable
          v-model="additional"
          label="开户行"
          placeholder="请输入开户行"
          input-align="right"
        />
      </van-cell-group>
    </div>
    <div class="bind_title">
      <span>*</span
      >请确认您填写的信息准确无误，否则因自身填写错误无法到账，由本人自己承担！
    </div>
    <div style="margin: 16px;margin-top: 0.92rem;">
      <van-button
        color="linear-gradient( 136deg, #6EC069 0%, #42A633 100%)"
        round
        block
        type="info"
        @click="submit"
        >保存</van-button
      >
    </div>
    <van-popup v-model="showPopup" position="bottom">
      <van-picker
        title="选择银行"
        value-key="name"
        show-toolbar
        :columns="bindList"
        @confirm="onConfirm"
        @cancel="showPopup=false"
        :value="cascaderValue"
      />
    </van-popup>
  </div>
</template>
<script>
import { WITHDRAW_ACCOUNT_UPDATE } from "@/api/mine";
import getBindList from './bind'
export default {
  data() {
    return {
      type: "",
      name: "",
      account: "",
      additional: "",
      showPopup: false,
      bindList:[],
      bind_name:'',
      cascaderValue:""
    };
  },
  mounted() {
    window.scrollTo(0, 0)
    this.bindList=getBindList
    this.type = this.$route.query.id;
    document.title = this.$route.query.id == 1 ? "绑定银行卡" : "绑定支付宝";
    this.name=JSON.parse(localStorage.getItem('bindInfo'))[0].name
    this.account=JSON.parse(localStorage.getItem('bindInfo'))[0].account
    this.additional=JSON.parse(localStorage.getItem('bindInfo'))[0].additional
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onConfirm(value){
      // console.log(value);
      if(value=='undefined'){
        this.showPopup=false
        return
      }
      this.cascaderValue=value.id
      this.bind_name=value.name
      this.showPopup=false
    },
    submit() {
        if (this.name == "") {
        this.$toast("请输入姓名");
        return;
      }
      if (this.account == "") {
        this.$toast(this.type==1?'请输入银行卡号':'请输入支付宝账户');
        return;
      }
      if (this.type == 1) {
        if (this.additional == "") {
          this.$toast("请输入开户行");
          return;
        }
      }
      let params={
        name:this.name,
        account:this.account,
        additional:this.additional,
        type:Number(this.type)
      }
      this.$http.post(WITHDRAW_ACCOUNT_UPDATE, params).then((res) => {
        if (res.code == 200) {
          this.$toast("绑定成功");
          this.$router.back();
        } else {
          this.$toast(res.msg);
        }
      });
    },
  },
};
</script>
<style less="scss" scoped>
.gold-shop-wrap {
  min-height: 100vh;
  padding-top: 46px;
}

::v-deep .van-nav-bar .van-icon {
  color: #333333;
}

::v-deep .van-nav-bar__arrow {
  font-size: 20px;
}

.bind_title {
  width: 95%;
  margin: 0.32rem auto;
  font-size: 0.24rem;
  color: #999;

  span {
    color: red;
  }
}
</style>
